<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>意见反馈 - 朋知云学</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <style>
        .feedback-section {
            padding: 60px 0;
        }
        .feedback-header {
            text-align: center;
            margin-bottom: 50px;
        }
        .feedback-header h1 {
            font-size: 2.5rem;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        .feedback-header p {
            font-size: 1.2rem;
            color: #7f8c8d;
            max-width: 800px;
            margin: 0 auto;
        }
        .feedback-content {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            padding: 40px;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
        }
        .form-group {
            margin-bottom: 25px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #2c3e50;
        }
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        .form-control:focus {
            border-color: #5bc0eb;
            outline: none;
        }
        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }
        .form-check {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .form-check input {
            margin-right: 10px;
        }
        .rating-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 25px;
        }
        .rating-title {
            margin-bottom: 10px;
            font-weight: 500;
            color: #2c3e50;
        }
        .rating-stars {
            display: flex;
            gap: 5px;
        }
        .rating-stars i {
            font-size: 1.5rem;
            color: #ddd;
            cursor: pointer;
            transition: color 0.3s;
        }
        .rating-stars i:hover, .rating-stars i.active {
            color: #ffc107;
        }
        .feedback-types {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 25px;
        }
        .feedback-type {
            padding: 8px 15px;
            background-color: #f8f9fa;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        .feedback-type:hover, .feedback-type.active {
            background-color: #e3f6fd;
            border-color: #5bc0eb;
        }
        .feedback-note {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin-top: 30px;
            font-size: 0.9rem;
            color: #666;
        }
        .feedback-success {
            display: none;
            text-align: center;
            padding: 30px;
        }
        .feedback-success i {
            font-size: 4rem;
            color: #28a745;
            margin-bottom: 20px;
        }
        .feedback-success h2 {
            font-size: 1.8rem;
            color: #2c3e50;
            margin-bottom: 15px;
        }
        .feedback-success p {
            color: #666;
            margin-bottom: 25px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <div class="logo">
                <img src="../static/avatar1.png" alt="朋知云学">
                <span>朋知云学</span>
            </div>
            <nav class="nav-menu">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="demands.html">支教需求</a></li>
                    <li><a href="ai-assistant.html">AI助手</a></li>
                    <li><a href="user-center.html">用户中心</a></li>
                </ul>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-login">登录</a>
                <a href="register.html" class="btn btn-register">注册</a>
            </div>
        </div>
    </header>

    <!-- 意见反馈内容 -->
    <section class="feedback-section">
        <div class="container">
            <div class="feedback-header">
                <h1>意见反馈</h1>
                <p>您的反馈是我们不断改进的动力，请告诉我们您的想法和建议</p>
            </div>
            
            <div class="feedback-content">
                <form id="feedbackForm">
                    <div class="form-group">
                        <label for="name">您的姓名（选填）</label>
                        <input type="text" id="name" class="form-control">
                    </div>
                    
                    <div class="form-group">
                        <label for="email">电子邮箱（如需回复请填写）</label>
                        <input type="email" id="email" class="form-control">
                    </div>
                    
                    <div class="rating-group">
                        <div class="rating-title">您对朋知云学平台的总体评价</div>
                        <div class="rating-stars" id="overallRating">
                            <i class="bi bi-star" data-value="1"></i>
                            <i class="bi bi-star" data-value="2"></i>
                            <i class="bi bi-star" data-value="3"></i>
                            <i class="bi bi-star" data-value="4"></i>
                            <i class="bi bi-star" data-value="5"></i>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>反馈类型（可多选）</label>
                        <div class="feedback-types">
                            <div class="feedback-type" data-type="suggestion">功能建议</div>
                            <div class="feedback-type" data-type="bug">问题反馈</div>
                            <div class="feedback-type" data-type="experience">使用体验</div>
                            <div class="feedback-type" data-type="content">内容相关</div>
                            <div class="feedback-type" data-type="other">其他</div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="feedbackContent">反馈内容</label>
                        <textarea id="feedbackContent" class="form-control" placeholder="请详细描述您的反馈内容，例如：遇到的问题、改进建议或使用体验等" required></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="attachment">上传附件（选填，如截图等）</label>
                        <input type="file" id="attachment" class="form-control">
                        <small>支持jpg、png、pdf格式，大小不超过5MB</small>
                    </div>
                    
                    <div class="form-check">
                        <input type="checkbox" id="contactConsent">
                        <label for="contactConsent">允许客服人员通过邮箱联系我，跟进反馈处理情况</label>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">提交反馈</button>
                    
                    <div class="feedback-note">
                        <p>注意：我们会认真对待每一条反馈，并尽快处理。如果是紧急问题，建议直接联系客服热线：400-123-4567</p>
                    </div>
                </form>
                
                <div class="feedback-success" id="feedbackSuccess">
                    <i class="bi bi-check-circle"></i>
                    <h2>感谢您的反馈！</h2>
                    <p>我们已收到您的宝贵意见，会认真考虑并尽快处理。</p>
                    <p>如果您提供了联系方式，我们的客服人员可能会与您联系，了解更多详情。</p>
                    <a href="index.html" class="btn btn-primary">返回首页</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <img src="../static/avatar1.png" alt="朋知云学">
                    <p>朋知云学 - 让支教更简单</p>
                </div>
                <div class="footer-links">
                    <div class="link-group">
                        <h4>关于我们</h4>
                        <ul>
                            <li><a href="about.html">平台介绍</a></li>
                            <li><a href="rules.html">用户守则</a></li>
                            <li><a href="contact.html">联系我们</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h4>帮助中心</h4>
                        <ul>
                            <li><a href="tutorial.html">使用教程</a></li>
                            <li><a href="faq.html">常见问题</a></li>
                            <li><a href="feedback.html" class="active">意见反馈</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h4>法律信息</h4>
                        <ul>
                            <li><a href="agreement.html">用户协议</a></li>
                            <li><a href="privacy.html">隐私政策</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 朋知云学. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 星级评分功能
            const stars = document.querySelectorAll('#overallRating i');
            stars.forEach(star => {
                star.addEventListener('click', function() {
                    const value = this.getAttribute('data-value');
                    stars.forEach(s => {
                        if (s.getAttribute('data-value') <= value) {
                            s.classList.remove('bi-star');
                            s.classList.add('bi-star-fill');
                            s.classList.add('active');
                        } else {
                            s.classList.add('bi-star');
                            s.classList.remove('bi-star-fill');
                            s.classList.remove('active');
                        }
                    });
                });
            });
            
            // 反馈类型选择
            const feedbackTypes = document.querySelectorAll('.feedback-type');
            feedbackTypes.forEach(type => {
                type.addEventListener('click', function() {
                    this.classList.toggle('active');
                });
            });
            
            // 表单提交处理
            document.getElementById('feedbackForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 这里可以添加表单验证和数据处理逻辑
                
                // 显示成功提交信息
                this.style.display = 'none';
                document.getElementById('feedbackSuccess').style.display = 'block';
                
                // 在实际应用中，这里应该有AJAX请求将数据发送到服务器
            });
        });
    </script>
</body>
</html>